<template>
    <el-container>
        <el-aside class="menu-animation bg-black-222" :class="isCollapse ? 'w-[56px]' : 'w-[200px]'">
            <SystemMenu :is-collapse="isCollapse"></SystemMenu>
        </el-aside>
        <el-container class="flex flex-col bg-lightgray">
            <el-header class="flex items-center bg-white">
                <div class="flex justify-between flex-1">
                    <el-icon v-if="!isCollapse" class="cursor-pointer" size="22px" @click="isCollapse = !isCollapse">
                        <Fold />
                    </el-icon>
                    <el-icon v-else class="cursor-pointer" size="22px" @click="isCollapse = !isCollapse">
                        <Expand />
                    </el-icon>
                    <div class="flex items-center">
                        <el-icon size="40px" color="#999999">
                            <Avatar />
                        </el-icon>
                        <el-dropdown @command="handleCommand">
                            <span class="flex text-[20px] text-[#999999] cursor-pointer">
                                <span class="pl-[12px] pr-[16px]">{{ userInfo?.username }}</span>
                                <el-icon class="cursor-pointer" size="22px" color="#999999">
                                    <arrow-down />
                                </el-icon>
                            </span>
                            <template #dropdown>
                                <el-dropdown-menu class="w-[224px] flex text-[#606266] flex-col items-center">
                                    <el-dropdown-item command="password">修改密码</el-dropdown-item>
                                    <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                </div>
            </el-header>
            <el-main class="flex flex-col">
                <div class="flex flex-col flex-1 bg-white px-[12px] pb-[12px] text-[#213547]">
                    <router-view></router-view>
                </div>
            </el-main>
        </el-container>
    </el-container>
    <CustomDialog v-model:show="isChangePassword" title="修改密码" width="500px" :align-center="true"
        @cancel="isChangePassword = false" @confirm="handlePasswordConfirm" :confirmLoading="loading">
        <ChangePassword ref="changePassword"></ChangePassword>
    </CustomDialog>
</template>

<script setup lang="ts">
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'
import SystemMenu from '../components/SystemMenu.vue'
import { computed, onMounted, ref } from 'vue'
import { Close, Fold, Expand, ArrowDown, Avatar } from '@element-plus/icons-vue'
import CustomDialog from '@/components/CustomDialog.vue'
import { logout } from '@/apis/system'
import { getUserInfo } from '@/utils/store'
const route = useRoute()
const router = useRouter()
const routeKey = computed(() => route.fullPath)
const hideHeader = computed(() => route.meta.hideHeader as boolean)
const isCollapse = ref(false)
const changePassword = ref()
const userInfo = getUserInfo()
const loading = ref<boolean>(false)
const isChangePassword = ref<boolean>(false)
const activeRouteName = computed(() => route.name)

const handleCommand = (command: string | number | object) => {
    if (command === 'password') {
        showPasswordDialog()
    } else if (command === 'logout') {
        handleLogout()
    }
}
const showPasswordDialog = () => {
    isChangePassword.value = true
}
const handleLogout = () => {
    logout().then(() => {
        router.replace({ name: 'Login' })
    })
}
const handlePasswordConfirm = async () => {
    if (!(await changePassword.value.updatePass())) return

    isChangePassword.value = false
}
</script>

<style lang="scss" scoped>
.tag {
    &.active {
        @apply bg-white;
    }
}

.menu-animation {
    transition-property: width;
    transition-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
    transition-duration: 300ms;
}

::v-deep(.el-dropdown-menu__item) {
    width: 100%;
    display: flex;
    justify-content: center;
    color: #606266;
}

.el-dropdown *:focus-visible {
    outline: none !important;
}
</style>